<script setup lang="ts">
import type { UserInfo } from '@/api/user/type';
import router from '@/router';
import { useAuthStore } from '@/stores/auth';
import { ref } from 'vue';


const formData = ref({} as UserInfo);
const onSubmit = async () => {
    const authStore = await useAuthStore();
    authStore.login(formData.value.username, formData.value.password).then(() => {
        router.push("/");
    })
}
</script>

<template>
    <div class="container">
        <div class="content">
            <div class="form">
                <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="用户名">
                        <el-input v-model="formData.username" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password" />
                    </el-form-item>
                    <el-form-item>
                        <div class="center">
                            <el-button type="primary" @click="onSubmit">登录</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.center {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.container {
    display: flex;
    height: 100%;
    width: 100%;
    background-image: url("/authBackground.jpg");
    background-size: cover;
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 300px;
        background-color: white;
        border-radius: 15px;
        .form {
            display: flex;
            height: 30%;
        }
    }
}
</style>